<script setup>
    import { onMounted, ref } from 'vue';
    import { get, post } from '../js/http.js'  

    const emit = defineEmits(['login', 'submit'])
    const username = ref("")
    const password = ref("")
    const loginData = ref(null)
    const token = localStorage.getItem("token")

    onMounted(async () => {
        try {  
            checkToken();
        } catch (error) {
            console.error('Fetch error:', error);
        }
    });
    async function checkToken() {
        if (token) {
            var checkData = await post("/admin/login/checkToken", { token: token });
           
            if (checkData.success) {
                localStorage.setItem("token", checkData.result)
                emit("login")
            } else {
                localStorage.clear()
            }
        }
    }
    async function login() {
        loginData.value = await post("/admin/login/login", { username: username.value, password: password.value });
 
        if (loginData.value.success) {
            localStorage.setItem("token", loginData.value.result)
            emit("login")
        } else { 
            window.message(loginData.value.message, 'warning')
        }
    }
    function clearLoginData() {

        loginData.value = null;
    }
</script>
<template>
    <div class="columns is-mobile">
        <div class="column ">
            <div class="card mt-6">
                <header class="card-header">
                    <p class="card-header-title">登录</p>
                    <button class="card-header-icon" aria-label="more options">
                        <span class="icon">
                            <i class="fas fa-angle-down" aria-hidden="true"></i>
                        </span>
                    </button>
                </header>
                <div class="card-content">
                    <div class="content">
                        <div class="field">
                            <label class="label">Name</label>
                            <div class="control">
                                <input class="input" type="text" placeholder="请输入用户名" v-model="username">
                            </div>
                        </div>

                        <div class="field">
                            <label class="label">Password</label>
                            <div class="control">
                                <input class="input" type="password" placeholder="请输入密码" v-model="password">
                            </div>
                        </div>
                    </div>
                </div>
                <footer class="card-footer">
                    <div class="card-footer-item">
                        <span>
                            <a>取消</a>
                        </span>
                    </div>
                    <div class="card-footer-item">
                        <span>  <a @click="login">登录</a> </span>
                    </div>
                </footer> 
            </div> 
        </div>
    </div>
</template>
<style scoped>
</style>
